<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.js"></script>
</head>

<body>
    <!-- 
        非单文件组件:一个文件中含有n个组件
        单文件组件:一个文件中只包含1个组件
     -->
    <!-- 
        1.Vue中使用组件的三大步骤：
            1.定义组件(创建组件)
            2.注册组件(局部注册或者全局注册)
            3.使用组件(写组件标签)
        2.如何定义一个组件:
            1.使用Vue.extend(options)创建，其中options和new Vue(options) 时传入的那个options几乎一样，但也有些区别
            区别如下:
                1.el不需要写 为什么?----最终所有组件都要由一个vm管理，由vm中的el决定服务于哪个容器
                2.data必须写成函数 为什么?----避免组件复用时候，数据存在引用关系
            备注:使用template可以配置组件结构

        3.如何注册组件:
            1.局部注册:靠new Vue的时候传入的那个components配置项
            2.全局注册:靠 Vue.component("组件名",组件)

        4.编写组件标签:
            <school></school>

        
      -->
    <div id="root">
        <!-- 使用全局组件 -->
        <hello></hello>
        <!-- 学校组件 -->
        <school></school>
        <hr>
        <!-- 学生组件 -->
        <student></student>
        <student></student>
    </div>

    <div id="root2">
        <!-- 使用全局组件 -->
        <hello></hello>
    </div>

    <script>
        Vue.config.productionTip = false;

        // 1.创建 hello 全局组件
        const hello = Vue.extend({
            template: `
            <div>
                <h2>hello,{{name}}</h2>
            </div>
            `,
            data() {
                return {
                    name: "Tom",
                }
            },
        });
        // 2.全局注册组件 该组件在全局都可以使用
        Vue.component("hello", hello);




        //#region 1.创建组件
        // 创建school组件
        const school = Vue.extend({
            // el: "#root", // 定义组件的时候一定不要写el配置项，因为最终的组件都要被一个vm管理，由vm决定服务于谁
            // data要写成函数形式 因为对象形式的data有引用关系 即修改一处的数据 另外一处使用这个组件的地方的数据也会发生改变
            template: `
            <div>
                <h2>学校名称:{{schoolName}}</h2>
                <h2>学校地址:{{schoolAddress}}</h2>
                <button @click="showName">点我提示学校名称</button>
            </div>
            `,
            data() {
                return {
                    schoolName: "尚硅谷",
                    schoolAddress: "北京",
                }
            },
            methods: {
                showName() {
                    alert(this.schoolName);
                }
            },
        });

        // 创建student组件
        const student = Vue.extend({
            template: `
            <div>
                <h2>学生名称:{{studentName}}</h2>
                <h2>学生年龄:{{studentAge}}</h2>
            </div>
            `,
            data() {
                return {
                    studentName: "张三",
                    studentAge: 20,
                }
            },
        });
        //#endregion

        //#region 2.注册组件
        // 创建vm
        new Vue({
            el: "#root",
            // 注册组件(局部组件)
            components: {
                school,
                student,
            }
        });
        //#endregion

        // 为root2创建vm
        new Vue({
            el: "#root2",
        })

    </script>

</body>

</html>